<template>
  <view class="box">
    <view @click="toDetail">
      <view class="title-box">
        <text class="expire-status" v-if="isExpired">失效</text>
        <text class="expire-status" v-if="boStatus === BoStatusEnum.Draft">草稿</text>
        <text class="title ov-1" :class="[expire]">{{ title }}</text>
      </view>
      <view class="industry-box" :class="[expire]">
        <view class="industry ov-1" :class="[expire]">
          <text>{{ boType === BoTypeEnum.Demand ? '行业要求：' : '所属行业：' }}</text>
          <text>{{ industryCategoryNames }}</text>
        </view>
        <view class="cooperation-type">{{ cooperationTypeName }}</view>
      </view>

      <view
        v-if="incentiveOpen === IncentiveOpenEnum.Yes"
        class="ov-2 fz-12 linh-16 mt-8"
        style="color: #ea5e0e"
        :class="[expire]"
      >
        撮合激励：{{
          getIncentiveDetails({
            estimatedScale: estimatedScale!,
            incentiveOpen: incentiveOpen,
            incentiveType: incentiveType!,
            showIncentiveDetails: showIncentiveDetails!,
            showCommissionRate: showCommissionRate!,
          })
        }}
      </view>

      <view v-if="!isMyManage" class="mt-8 fz-12 linh-16 default-color">
        来源信息：{{ orgName }}
      </view>

      <view class="collect" :class="[expire]">
        <text class="update-time">更新于：{{ formatToDate(updateTime) }}</text>
        <view v-if="boStatus !== BoStatusEnum.Draft" class="statistics">
          <view class="disFlxAC">
            <text class="ali-icon icon-shangji2"></text>
            <text>{{ cooperationNum }}</text>
          </view>
          <view class="disFlxAC">
            <text class="ali-icon icon-yanjing"></text>
            <text>{{ browseNum }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="my-8 h-1" style="background-color: #ebedf0"></view>
    <view class="btns py-8">
      <view
        class="disFlxAC disFlxJC gap-4 flex-1"
        v-for="(item, index) in btnsData"
        :key="index"
        @click="item.fn"
        style="color: #969799"
      >
        <!-- :style="{ color: item.iconColor }" -->
        <text class="ali-icon fz-16">{{ item.icon }}</text>
        <text class="fz-12">{{ item.text }}</text>
      </view>
    </view>
    <TImage
      class="corner-mark"
      width="80rpx"
      height="80rpx"
      :src="`https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/${
        boType === BoTypeEnum.Supply ? 'supply-icon' : 'demand-icon'
      }-1.png`"
    />
  </view>
</template>
<script setup lang="ts">
  import { behaviorCollectOperate } from '@/api';
  import TImage from '@/components/TImage/index.vue';
  import {
    BoStatusEnum,
    BoTypeEnum,
    IncentiveOpenEnum,
    IncentiveTypeEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import { AssTypeEnum } from '@/enums/orderEnum';
  import { BehaviorCollectTypeEnum } from '@/enums/publicModuleEnum';
  import { formatToDate } from '@/utils/dateUtil';
  import { computed, type PropType } from 'vue';
  import { getIncentiveDetails } from '../../components/utils';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    /**收藏状态 */
    collect: {
      type: Boolean,
      default: false,
    },
    isMyManage: {
      type: Boolean,
      default: true,
    },
    /**供需状态 */
    boStatus: {
      type: Number as PropType<BoStatusEnum>,
    },
    /**是否代理：1:代理；0:自己，代理有编辑权限 */
    agent: {
      type: Number,
    },
    /**标题 */
    title: {
      type: String,
    },
    /**行业分类子级名称，多个用逗号分隔 */
    industryCategoryNames: {
      type: String,
    },
    /**合作类型 */
    cooperationTypeName: {
      type: String,
    },

    /** 收藏人数 */
    cooperationNum: {
      type: Number,
    },
    /** 浏览人数 */
    browseNum: {
      type: Number,
    },

    /**供需类型 */
    boType: {
      type: Number as PropType<BoTypeEnum>,
    },
    /**激励类型 */
    incentiveType: {
      type: Number as PropType<IncentiveTypeEnum>,
    },
    /**激励佣金 */
    showCommissionRate: {
      type: String,
    },
    /** 激励说明 */
    showIncentiveDetails: {
      type: String,
    },
    /**预估规模 */
    estimatedScale: {
      type: String,
    },
    /** 撮合开关；0:否;1是 */
    incentiveOpen: {
      type: Number as PropType<IncentiveOpenEnum>,
    },
    /**更新时间 */
    updateTime: {
      type: String,
    },
    /**来源 */
    orgName: {
      type: String,
    },
    assType: {
      type: Number as PropType<AssTypeEnum>,
      default: AssTypeEnum.ALLIANCE,
    },
    phone: {
      type: String,
      default: '',
    },
    /** 是否置顶 */
    top: propTypes.bool.def(false),
  });

  const emits = defineEmits([
    'edit',
    'set',
    'remove',
    'del',
    'release',
    'detail',
    'follow',
    'share',
    'collect',
    'setTop',
    'close',
  ]);

  const toDetail = () => {
    emits('detail');
  };

  const btnsData = computed(() => {
    return [
      {
        text: '更多',
        icon: '\ue6d4',
        fn: () => {
          const itemList = [props.collect ? '取消收藏' : '收藏供需', '跟进记录'];
          if (props.assType === AssTypeEnum.OUTSIDE) itemList.push('移出本会');
          if (props.assType === AssTypeEnum.INNER) itemList.push('关闭供需');

          uni.showActionSheet({
            itemList: itemList,
            success: ({ tapIndex }) => {
              if (['取消收藏', '收藏供需'].includes(itemList[tapIndex])) {
                emits('collect');
              } else if ('跟进记录' === itemList[tapIndex]) {
                emits('follow');
              } else if ('移出本会' === itemList[tapIndex]) {
                uni.showModal({
                  title: '确定移出本会？',
                  content: '确定要将此跨会供需移出本会供需库？移除后将无法再加回来，请知悉。',
                  confirmText: '确定移除',
                  cancelText: '取消',
                  confirmColor: '#ff5c5c',
                  showCancel: true,
                  success: ({ confirm }) => confirm && emits('remove'),
                });
              } else if ('关闭供需' === itemList[tapIndex]) {
                uni.showModal({
                  title: '确定关闭该供需？',
                  content: '确定要关闭该供需吗？关闭后，该供需将不再显示，且无法再恢复。',
                  confirmText: '确定关闭',
                  cancelText: '取消',
                  confirmColor: '#ff5c5c',
                  showCancel: true,
                  success: ({ confirm }) => confirm && emits('close'),
                });
              }
            },
          });
        },
        show: !props.isMyManage && props.boStatus !== BoStatusEnum.Draft,
      },
      {
        text: '更多',
        icon: '\ue6d4',
        fn: () => {
          const itemList = ['跟进记录', '联系发布者', '关闭供需'];
          uni.showActionSheet({
            itemList: itemList,
            success: ({ tapIndex }) => {
              if ('联系发布者' === itemList[tapIndex]) {
                uni.makePhoneCall({
                  phoneNumber: props.phone,
                });
              } else if ('跟进记录' === itemList[tapIndex]) {
                emits('follow');
              } else if ('关闭供需' === itemList[tapIndex]) {
                uni.showModal({
                  title: '确定关闭该供需？',
                  content: '确定要关闭该供需吗？关闭后，该供需将不再显示，且无法再恢复。',
                  confirmText: '确定关闭',
                  cancelText: '取消',
                  confirmColor: '#ff5c5c',
                  showCancel: true,
                  success: ({ confirm }) => confirm && emits('close'),
                });
              }
            },
          });
        },
        show: props.isMyManage && props.boStatus === BoStatusEnum.Active,
      },
      {
        text: '跟进记录',
        icon: '\ue67f',
        fn: () => {
          emits('follow');
        },
        show: props.isMyManage && isExpired.value,
      },
      {
        text: '联系发布者',
        icon: '\ue6cb',
        fn: () => {
          uni.makePhoneCall({
            phoneNumber: props.phone,
          });
        },
        show: props.isMyManage && isExpired.value,
      },
      {
        text: '设置',
        icon: '\ue634',
        fn: () => {
          emits('set');
        },
        show: (() => {
          return props.isMyManage && !isExpired.value;
        })(),
      },
      {
        text: '删除',
        icon: '\ue686',
        fn: () => {
          uni.showModal({
            title: '确定删除草稿',
            content: '确定删除草稿？删除后后将无法再加回来，请知悉。',
            confirmText: '确定删除',
            cancelText: '取消',
            confirmColor: '#ff5c5c',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                emits('del');
              }
            },
          });
        },
        show: props.boStatus === BoStatusEnum.Draft,
      },
      {
        text: '发布',
        icon: '\ue6a8',
        fn: () => {
          uni.showModal({
            title: '发布供需',
            content: '确定发布供需吗？',
            confirmText: '发布',
            cancelText: '取消',
            confirmColor: '#ff5c5c',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                emits('release');
              }
            },
          });
        },
        show: props.boStatus === BoStatusEnum.Draft,
      },
      {
        text: '编辑',
        icon: '\ue687',
        fn: () => {
          emits('edit');
        },
        show: (() => {
          return (
            props.isMyManage &&
            !isExpired.value &&
            props.boStatus !== BoStatusEnum.Reviewing &&
            props.agent
          );
        })(),
      },

      // {
      //   text: '收藏',
      //   icon: props.collect ? ' \ue669' : '\ue664',
      //   iconColor: props.collect ? '#2878FF' : '',
      //   fn: () => {
      //     emits('collect');
      //   },
      //   show: !props.isMyManage,
      // },
      {
        text: props.top ? '取消置顶' : '置顶',
        icon: '\ue673',
        fn: () => {
          emits('setTop');
        },
        show: !props.isMyManage,
      },
      {
        text: '推广',
        icon: '\ue6b9',
        fn: () => emits('share'),
        show: props.boStatus === BoStatusEnum.Active,
      },
    ].filter((item) => item.show);
  });

  const isExpired = computed(() => {
    return [BoStatusEnum.Expired, BoStatusEnum.Closed].includes(props.boStatus!);
  });

  const expire = computed(() => {
    if (isExpired.value) return 'expire';
    return '';
  });
</script>
<style lang="scss" scoped>
  .box {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 32rpx;
    position: relative;
    overflow: hidden;
    .expire {
      color: #c8cacc !important;
    }
    .title-box {
      display: flex;
      align-items: center;
      gap: 8rpx;
      .expire-status {
        border-radius: 20rpx;
        background: #c8cacc;
        padding: 4rpx 8rpx;
        color: #ffffff;
        font-size: 24rpx;
        line-height: 32rpx;
        white-space: nowrap;
      }
      .title {
        color: #333;
        font-size: 32rpx;
        line-height: 48rpx;
      }
    }
    .industry-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32rpx;
      margin-top: 16rpx;
      .industry {
        color: #333;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .cooperation-type {
        border-radius: 4rpx;
        background: #d0f7ff;
        padding: 4rpx 12rpx;
        color: #2878ff;
        font-size: 20rpx;
        line-height: 28rpx;
        white-space: nowrap;
      }
    }

    .cooperation-period {
      margin-top: 16rpx;
      overflow: hidden;
      color: #333;
      font-size: 24rpx;
      line-height: 32rpx;
    }

    .collect {
      margin-top: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #969799;
      font-size: 24rpx;
      line-height: 32rpx;

      .statistics {
        display: flex;
        align-items: center;
        gap: 24rpx;
        .ali-icon {
          margin-right: 8rpx;
        }
      }
    }
    .btns {
      margin-top: 16rpx;
      display: flex;
      justify-content: space-between;
    }
    .corner-mark {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>
